package cn.client.ui.components

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview(showBackground = true)
@Composable
fun TabPreview() {
    val selectedTabIndex = mutableStateOf(0)
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Spacer(modifier = Modifier
            .fillMaxWidth()
            .height(50.dp))
        TabContents(selectedTabIndex)
    }
}

@Composable
fun TabContents(
    selectedTabIndex: MutableState<Int>
) {

    TabRow(
        selectedTabIndex = selectedTabIndex.value,
        modifier = Modifier.fillMaxWidth()
    ) {
        Tab(
            selected = selectedTabIndex.value == 0,
            onClick = { selectedTabIndex.value = 0 },
            text = { Text(text = "tab1") }
        )
        Tab(
            selected = selectedTabIndex.value == 1,
            onClick = { selectedTabIndex.value = 1 },
            text = { Text(text = "tab2") }
        )
    }
    TabContent(selectedTabIndex.value)
}
@Composable
fun TabContent(index: Int) {
    when (index) {
        0 -> {
            // Tab 1 的内容
            content1()
        }
        1 -> {
            // Tab 2 的内容
            content2()
        }
        // 可以继续添加更多的 tab 内容
    }
}

@Composable
fun content1() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Row {
            Text("这是 Tab 1 的内容")
        }
    }
}

@Composable
fun content2() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Row {
            Text("这是 Tab 2 的内容")
        }
    }
}
